<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o"><router-link to="/HomePage">主页</router-link></van-tabbar-item>
      <van-tabbar-item icon="vip-card-o"><router-link to="/User">会员</router-link></van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :badge="badge"><router-link to="/ShopCar">购物车</router-link></van-tabbar-item>
      <van-tabbar-item icon="search"><router-link to="/Search">查找</router-link></van-tabbar-item>
    </van-tabbar>
    <!-- <ul>
        <li>
            <router-link to="/HomePage" :tag="li">
                <i class="iconNews"></i>
                <p>首页</p>
            </router-link>
        </li>
        <li>
            <router-link to="/Search" :tag="li">
                <i class="iconMarket"></i>
                <p>搜索</p>
            </router-link>
        </li>
        <li>
            <router-link to="/Shopcar" :tag="li">
                <i class="iconShopping"></i>
                <p>购物车</p>
            </router-link>
        </li>
        <li>
            <router-link :to="{name:'User'}" :tag="li">
                <i class="iconUser"></i>
                <p>我的</p>
            </router-link>
        </li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      active:0,
      badge:0
    };
  },
  methods:{
    getBadge:function(){
      this.axios.get("extra/getTotal.php").then(response=>{
        this.badge=(response.data[0]['count'])
      })
    }
  },
  created() {
    this.getBadge()
    this.badge=this.badges
    // console.log(this.$route)
    let routeName=this.$route.path.slice(1)
    if(routeName==="HomePage"){
      this.active=0
    }
    else if(routeName==="User"){
      this.active=1
    }
    else if(routeName==="ShopCar"){
      this.active=2
    }
    else if(routeName==="Search"){
      this.active=3
    }
    else{
      this.active=0
    }
  },
};
</script>

<style scoped>
.footer {
  width: 100%;
  height: 50px;
  background-color: white;
  border: 1px solid #ebe8e3;
  border-top: none;
  position: fixed;
  bottom: 0;
  font-family: "FontAwesome";
}
.footer ul {
  align-items: center;
  text-align: center;
  height: 100%;
  width: 350px;
  margin: 0 auto;
}
.footer ul li {
  height: 100%;
  width: 50px;
  float: left;
  margin-right: 15px;
  margin-left: 22px;
}
a {
  text-decoration: none;
}
a:visited{
    color: black;
}
.footer ul li a:visited {
  color: black;
}
.iconNews::before {
  font-size: 30px;
  content: "\f1ea";
}
.iconUser::before {
  content: "\f007";
  font-size: 30px;
}
.iconMarket::before {
  font-size: 30px;
  content: "\f0ac";
}
.iconShopping::before {
  content: "\f07a";
  font-size: 30px;
}
</style>
